<template>
  <sz-Exhibition :code="code" :title="title" :data="data">
    <div slot="controller">
      功能暂定 ...
    </div>
    <sz-Sweiper :model="images" type="stack" slide width="400" height="200" :time="1" auto>
      <template v-slot:default="{data:data}">
        {{data}}
        <img
          :src="data.src"
          width="100%"
          height="100%"
          style="position:absolute;top:0;left:0;z-index:-1;"
        />
      </template>
    </sz-Sweiper>
  </sz-Exhibition>
</template>

<script>
export default {
  data() {
    return {
      title: "sz-Sweiper-轮播图",
      // 轮播图数据
      images: [
        {
          src: "http://www.shuyuhng.top:9999/img/aa.bdab5332.jpg"
        },
        {
          src: "http://www.shuyuhng.top:9999/img/aa.bdab5332.jpg"
        },
        {
          src: "http://www.shuyuhng.top:9999/img/aa.bdab5332.jpg"
        },
        {
          src: "http://www.shuyuhng.top:9999/img/aa.bdab5332.jpg"
        }
      ],
      code: `
<template>
  <sz-Sweiper :model="images" width="700" height="400" :time="1" auto>
    <template v-slot:default="{data:data}">
      {{data}}
      <img :src="data.src" width="100%" height="100%" />
    </template>
  </sz-Sweiper>
</template>

<js>
export default {
  data() {
    return {
      // 轮播图数据
      images: [
        {
          src: "http://www.shuyuhng.top:9999/img/aa.bdab5332.jpg"
        },
        {
          src: "http://www.shuyuhng.top:9999/img/aa.bdab5332.jpg"
        },
        {
          src: "http://www.shuyuhng.top:9999/img/aa.bdab5332.jpg"
        },
        {
          src: "http://www.shuyuhng.top:9999/img/aa.bdab5332.jpg"
        }
      ]
    };
  }
};
</js>
      `,
      data: [
        {
          title: "属性",
          tableKey: [
            {
              name: "参数",
              key: "param"
            },
            {
              name: "说明",
              key: "explain"
            },
            {
              name: "选填",
              key: "optional"
            },
            {
              name: "类型",
              key: "type"
            },
            {
              name: "可选值",
              key: "selval"
            },
            {
              name: "默认值",
              key: "default"
            },

          ],
          table: [
            {
              param: 'model',
              explain: '基础数据',
              optional: '否',
              type: 'Array',
              selval: '----',
              default: '----',
            },
            {
              param: 'width',
              explain: '轮播图宽度',
              optional: '是',
              type: 'Number/String',
              selval: '----',
              default: '700',
            },
            {
              param: 'height',
              explain: '轮播图高度',
              optional: '是',
              type: 'Number/String',
              selval: '-----',
              default: '400',
            },
            {
              param: 'type',
              explain: '轮播图类型',
              optional: '是',
              type: 'String',
              selval: 'infinite/default/fade/stack',
              default: 'default',
            },
            {
              param: 'time',
              explain: '每次滚动时间',
              optional: '是',
              type: 'Number',
              selval: '----',
              default: '0.8',
            },
            {
              param: 'auto',
              explain: '是否自动播放',
              optional: '是',
              type: 'Boolean',
              selval: 'true/false',
              default: 'false',
            },
            {
              param: 'autoTime',
              explain: '自动播放的时间',
              optional: '是',
              type: 'Number',
              selval: '----',
              default: '3000',
            },
            {
              param: 'noIndicator',
              explain: '是否显示指示器',
              optional: '是	',
              type: 'Boolean',
              selval: 'true/false',
              default: 'false',
            },
            {
              param: 'bottomBtnClass',
              explain: '给指示器绑定类名',
              optional: '是',
              type: 'String',
              selval: '----',
              default: '----',
            },
            {
              param: 'slide',
              explain: '是否支持滑动	',
              optional: '是',
              type: 'Boolean	',
              selval: 'true/false',
              default: 'false',
            },
            {
              param: 'noBtn',
              explain: '是否显示按钮',
              optional: '是',
              type: 'Boolean',
              selval: 'true/false',
              default: 'false',
            },
          ]
        },
        {
          title: "slot插槽",
          tableKey: [
            { name: "插槽名称", key: "name" },
            { name: "说明", key: "explain" }
          ],
          table: [
            {
              name: "default",
              explain: "轮播图内容"
            },
            {
              name: "left-btn",
              explain: "左边的按钮"
            },{
              name: "right-btn",
              explain: "右边的按钮"
            },
          ]
        }
      ]
    };
  }
};
</script>

<style>
</style>